<template>
  <div class="maincontent unitSelection">
    <div class="maintitle">
      <div class="stepnumber">1</div>
      <div class="title">前期测绘机构选取方式</div>
    </div>
    <!-- 1 -->
    <el-form
      label-position="right"
      :model="form"
      label-width="80px"
      ref="formData_1"
      :rules="formDataRules"
    >
      <div class="formcontent">
        <el-form-item label="选取方式" label-width="121px" prop="pickMethod">
          <el-select v-model="form.pickMethod" :disabled="isCurrentProcess">
            <el-option
              v-for="item in pickList"
              :label="item.methodName"
              :key="item.pickMethod"
              :value="item.pickMethod"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="pickListCurrent.pickDocument" prop="pickFileId" label-width="121px">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :file-list="fileList[0]"
            :on-success="bindUploadSuccess_1"
            :limit="1"
            ref="upload_1"
            accept=".pdf"
            :disabled="isCurrentProcess"
            v-if="!isCurrentProcess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="viewDocment" v-if="isCurrentProcess">
            <seeFujian
              v-if="historyData.pickFile"
              @openPdf="seePdf"
              :file-name="historyData.pickFile | backFileName"
              :file-url="historyData.pickFile.filePath"
            />
            <!-- <span><i class="el-icon-document" />{{historyData.pickFile | backFileName}}</span>
            <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(historyData.pickFile.filePath,historyData.pickFile.fileName)">查看</a>-->
          </div>
        </el-form-item>
      </div>
    </el-form>

    <div class="maintitle" style="margin-top:60px;">
      <div class="stepnumber" style="opacity:0.7;">2</div>
      <div class="title">前期测绘机构名称</div>
    </div>
    <!-- 2 -->
    <el-form
      label-width="110px"
      style="margin-top:30px"
      label-position="left"
      ref="formData_2"
      :model="form"
      :rules="formDataRules"
    >
      <div class="formcontent">
        <el-form-item label="选择单位/公司" prop="companyId" label-width="120px">
          <el-select
            style="width:220px"
            v-model="form.companyId"
            filterable
            :disabled="isCurrentProcess"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="pickListCurrent.notifyDocument" prop="pickFileId" label-width="121px">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :file-list="fileList[1]"
            :on-success="bindUploadSuccess_2"
            :limit="1"
            ref="upload_2"
            accept=".pdf"
            :disabled="isCurrentProcess"
            v-if="!isCurrentProcess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="viewDocment" v-if="isCurrentProcess">
            <seeFujian
              v-if="historyData.notifyFile"
              @openPdf="seePdf"
              :file-name="historyData.notifyFile | backFileName"
              :file-url="historyData.notifyFile.filePath"
            />
            <!-- <span><i class="el-icon-document"/>{{historyData.notifyFile | backFileName}}</span>
            <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(historyData.notifyFile.filePath,historyData.notifyFile.fileName)">查看</a>-->
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="maintitle" style="margin-top:60px;">
      <div class="stepnumber" style="opacity:0.7;">3</div>
      <div class="title">合同信息</div>
    </div>
    <el-form
      label-width="110px"
      style="margin-top:30px"
      label-position="left"
      ref="formData_3"
      :model="form"
      :rules="formDataRules"
    >
      <div class="formcontent">
        <el-form-item label="已签订的合同" label-width="118px" prop="contractFileId">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :file-list="fileList[2]"
            :on-success="bindUploadSuccess_3"
            :limit="1"
            :ref="`upload_3${pickListCurrent.pickMethod}`"
            accept=".pdf"
            :disabled="isCurrentProcess"
            v-if="!isCurrentProcess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="viewDocment" v-if="isCurrentProcess">
            <seeFujian
              v-if="historyData.contractFile"
              @openPdf="seePdf"
              :file-name="historyData.contractFile | backFileName"
              :file-url="historyData.contractFile.filePath"
            />
            <!-- <span><i class="el-icon-document"/>{{historyData.contractFile | backFileName}}</span>
            <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(historyData.contractFile.filePath,historyData.contractFile.fileName)">查看</a>-->
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div style="margin-top:40px;">
      <el-button type="primary" @click="onSubmit" v-if="!isCurrentProcess">提交</el-button>
      <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
    </div>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUnitSelectionData,
  getCompanyList,
  submitFormData,
  getPicMehodList
} from "@/api/earlyMapping/unitSelection";
import process from "../../../projectManagement/public/process";
import config from "@/config/index.js";
import seeFujian from "@/components/seeFujian";
import { validateNotNull, validateUpload } from "@/utils/validate.js";
export default {
  components: {
    process: process,
    seeFujian
  },
  data() {
    return {
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      projectId: localStorage.getItem("projectId") * 1,
      form: {
        pickMethod: "",
        pickFileId: "",
        companyId: "",
        notifyFileId: "",
        contractFileId: ""
      },
      pickMethod: "",
      historyData: {}, // 页面历史数据
      companyList: [], //企业列表数据
      pickList: [], //选取方式列表数据
      uploadUrl: config.uploadUrl, //上传接口
      baseUrl: config.baseUrl,
      fileList: [],
      formDataRules: {
        pickMethod: [{ validator: validateNotNull, trigger: "change" }],
        pickFileId: [{ validator: validateUpload, trigger: "blur" }],
        companyId: [{ validator: validateNotNull, trigger: "change" }],
        notifyFileId: [{ validator: validateUpload, trigger: "blur" }],
        contractFileId: [{ validator: validateUpload, trigger: "blur" }]
      } //表单规则验证
    };
  },
  computed: {
    pickListCurrent() {
      let obj = { pickMethod: "", pickDocument: "", notifyDocument: "" };
      const inx = this.pickList.findIndex(item => {
        return this.form.pickMethod == item.pickMethod;
      });
      if (inx !== -1) {
        obj = this.pickList[inx];
      }
      return obj;
    },
    isCurrentProcess: function() {
      let isTrue = localStorage.getItem("key") == "PRE_PROJECTING_DIST_SELECT";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  filters: {
    backFileName: function(data) {
      if (data) {
        return data.fileName;
      } else {
        return "";
      }
    },
    backFilePath: function(data, baseUrl) {
      if (data) {
        return baseUrl + data.filePath;
      } else {
        return "#";
      }
    }
  },
  created() {
    this.getInitData();
  },
  methods: {
    //查看当前PDF
    seePdf(url, name) {
      this.pdfFlag = true;
      this.pdfUrl = url;
      this.pdfName = name;
    },
    getInitData() {
      this._getHistoryData();
      this.handleGetCompanyList();
      this.getPickList();
    },
    handleReset() {
      this.$refs["formData_1"].resetFields();
      this.$refs["formData_2"].resetFields();
      this.$refs["formData_3"].resetFields();
    },
    onSubmit() {
      let isTrue1 = false,
        isTrue2 = false,
        isTrue3 = false;
      this.$refs["formData_1"].validate(valid => {
        isTrue1 = Boolean(valid);
      });
      this.$refs["formData_2"].validate(valid => {
        isTrue2 = Boolean(valid);
      });
      this.$refs["formData_3"].validate(valid => {
        isTrue3 = Boolean(valid);
      });
      if (isTrue1 && isTrue2 && isTrue3) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        submitFormData(Object.assign(this.form, { projectId: this.projectId }))
          .then(res => {
            this.$message.success("操作成功！");
            loading.close();
            this.$router.push("/projectManagement/planningStage/dealwith");
          })
          .catch(err => {
            loading.close();
          });
      }
    },
    //获取企业列表数据
    handleGetCompanyList() {
      let params = {
        page: 1,
        size: 9999
      };
      getCompanyList(params).then(res => {
        this.companyList = res.data.rows;
      });
    },
    //获取字典表选取方式
    getPickList() {
      getPicMehodList().then(res => {
        this.pickList = res.data;
      });
    },
    //文件上传成功回调_1
    bindUploadSuccess_1: function(res, file, fileList) {
      this.form["pickFileId"] = res.data.id;
      this.$refs["formData_1"].validate(valid => {});
    },
    //文件上传成功回调_2
    bindUploadSuccess_2: function(res, file, fileList) {
      this.form["notifyFileId"] = res.data.id;
      this.$refs["formData_2"].validate(valid => {});
    },
    //文件上传成功回调_3
    bindUploadSuccess_3: function(res, file, fileList) {
      this.form["contractFileId"] = res.data.id;
      this.$refs["formData_3"].validate(valid => {});
    },
    /*
     * 前期测绘单位选择-获取页面数据
     * */
    _getHistoryData() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getUnitSelectionData(this.projectId)
        .then(res => {
          if (res.data) {
            this.historyData = res.data;
            const formTemp = Object.assign(this.form);
            formTemp.pickMethod = this.historyData.pickMethod;
            formTemp.pickFileId = this.historyData.pickFileId;
            formTemp.companyId = this.historyData.companyId;
            formTemp.notifyFileId = this.historyData.notifyFileId;
            formTemp.contractFileId = this.historyData.contractFileId;
            this.form = formTemp;
            this.historyData.pickFile &&
              this.fileList.push([
                {
                  name: this.historyData.pickFile.fileName,
                  url: this.historyData.pickFile.filePath
                }
              ]);
            this.historyData.notifyFile &&
              this.fileList.push([
                {
                  name: this.historyData.notifyFile.fileName,
                  url: this.historyData.notifyFile.filePath
                }
              ]);
            this.historyData.contractFile &&
              this.fileList.push([
                {
                  name: this.historyData.contractFile.fileName,
                  url: this.historyData.contractFile.filePath
                }
              ]);
            this.loading = null;
            console.log(this.historyData);
          }
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.unitSelection {
  /deep/ .el-form--label-left /deep/ .el-form-item__label {
    text-align: right;
  }
}
</style>
<style lang="scss" scoped>
.maincontent {
  margin: 10px;
  box-sizing: border-box;
  background: #ffffff;
  padding: 20px;
  .maintitle {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    .stepnumber {
      width: 32px;
      height: 32px;
      background: #2e8ae6;
      text-align: center;
      line-height: 32px;
      border-radius: 100px;
      font-size: 18px;
      font-family: Helvetica;
      color: #ffffff;
    }
    .title {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      margin-left: 20px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
  .formcontent {
    margin-top: 30px;
    .upload-demo {
      width: 300px;
    }
  }
}
</style>
